<script setup>
// 订单详情
import { ref,onMounted } from 'vue'
const tableheight = ref('310px')
import { orderinfoApi } from '../../api/index'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
const Id = ref(route.query.id)
const tabid = ref(route.query.tab)
const imgvisb = ref(false)
const imgs = ref('')
const infolist = ref([])
const getinfo = async function () {
  const msg = await orderinfoApi({
    Id:Id.value
  })
  if (msg.data.code == 0) {
    infolist.value = msg.data.data
  }
}

const viewimg = function (val) {
  imgvisb.value = true
  imgs.value = val
}
const push = function () {
  if (tabid.value == 1) {
     router.push({path:'/order/orderinfo'})
  } else if (tabid.value == 2) {
    router.push({path:'/order/warehousi'})
  }else if (tabid.value == 3) {
    router.push({path:'/order/destination'})
  }else if (tabid.value == 4) {
    router.push({path:'/order/income'})
  }else if (tabid.value == 5) {
    router.push({path:'/order/showex'})
  }
  
}
onMounted(() => {
  getinfo()
})

</script>
<template>
    <div class="member_right">
    <div class="right_main">
      <ul class="mainbt btheight">
        <li class="z8">
          <h2>订单详情</h2>
        </li>
        <li class="more blue"><a @click="push" :to="{path:'/order/orderinfo'}" class="ahover">返回订单列表</a></li>
      </ul>
      <table cellpadding="0" cellspacing="0" border="0" class="mTbList table_biao_bor">
        <tbody>
          <tr >
            <td class="mThBgA" align="right" width="20%">订单号：</td>
            <td>{{ infolist.orderId }}</td>
          </tr>
          <tr >
            <td class="mThBgA" align="right" width="20%">数量：</td>
            <td>{{ infolist.count }}</td>
          </tr>
          <tr >
            <td class="mThBgA" align="right" width="20%">产品：</td>
            <td>{{ infolist.title }}</td>
          </tr>
          <tr >
            <td class="mThBgA" align="right" width="20%">备注：</td>
            <td>{{ infolist.text }}</td>
          </tr>
          <tr >
            <td class="mThBgA" align="right" width="20%">订单时间：</td>
            <td>{{ infolist.time }}</td>
          </tr>
          <tr >
            <td class="mThBgA" align="right" width="20%">订单状态：</td>
            <td>{{ infolist.orderStatus }}</td>
          </tr>
          <tr v-if="infolist.decryptBool">
            <td class="mThBgA" align="right" width="20%">解密状态：</td>
            <td>{{ infolist.decryptBool?'已解密':'未解密' }} ({{ infolist.decrypt_Time }})</td>
          </tr>
          <tr v-if="infolist.decryptBool">
            <td class="mThBgA" align="right" width="20%">解密备注：</td>
            <td>{{ infolist.decrypt_Text }}</td>
          </tr>
		      <tr v-if="infolist.scrap">
            <td class="mThBgA" align="right" width="20%">报废状态：</td>
            <td>{{ infolist.scrap?'已报废':'未报废' }} ({{ infolist.scrap_Time }}) </td>
          </tr>
          <tr v-if="infolist.scrap">
            <td class="mThBgA" align="right" width="20%">报废备注：</td>
            <td>{{ infolist.scrap_Text }} </td>
          </tr>
          <tr v-if="infolist.recycle">
            <td class="mThBgA" align="right" width="20%">回收状态：</td>
            <td>{{ infolist.recycle?'已回收':'未回收' }} ({{ infolist.recycle_Time }}) </td>
          </tr>
          <tr v-if="infolist.recycle">
            <td class="mThBgA" align="right" width="20%">回收备注：</td>
            <td> {{ infolist.recycle_Text }}</td>
          </tr>
          <tr v-if="infolist.invalid">
            <td class="mThBgA" align="right" width="20%">无效状态：</td>
            <td>{{ infolist.invalid?'无收':'有效' }} ({{ infolist.invalid_Time }})</td>
          </tr>
          <tr v-if="infolist.invalid">
            <td class="mThBgA" align="right" width="20%">无效备注：</td>
            <td>{{ infolist.invalid_Text}} </td>
          </tr>
          <tr v-if="infolist.endBool">
            <td class="mThBgA" align="right" width="20%">完成状态：</td>
            <td>{{ infolist.endBool?'已完成':'未完成' }} ({{ infolist.end_Time }})</td>
          </tr>
          <tr v-if="infolist.endBool">
            <td class="mThBgA" align="right" width="20%">完成备注：</td>
            <td>{{ infolist.end_Text }}</td>
          </tr>
        </tbody>
      </table>
      <el-divider>
        <span style="font-size: 16px;">备注图片</span>
      </el-divider>
      <img v-for="(item,index) in infolist.thumb_List" style="width: 140px;height:140px;border: 1px solid var(--el-border-color);border-radius: 6px;margin:0 8px 8px 0;" @click="viewimg(item.url)" :src="item.url" alt="">
      <el-dialog v-model="imgvisb">
        <img :src="imgs" style="width: 100%;height:100%" alt="">
      </el-dialog>
  </div>
  </div>

    
      <div style="clear:both;"></div>
</template>
<style scoped>
.ahover:hover{
  color:#FCBE00;
}
</style>